<template>
	<!-- 生产信息页面 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产情况</text></view>
					</template>
					<my-grid :list="list" :decimals="2" :col="3"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">原煤产量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">剥离土方量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">产量预测</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts3" :chartData="chartData3" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	/**************************************请求数据逻辑*************************************************/
	import {
		getApiFabric,
		getByApiCode
	} from '@/api/customApi'
	const showMoreKeys = ref([1, 2, 3, 4]),
		collapse = ref(null)

	/**************************************生产情况*************************************************/
	let list = ref([{
		key: '日采煤',
		title: '日采煤量',
		value: '0',
		unit: '万吨'
	}, {
		key: '月采煤',
		title: '月采煤量',
		value: '0',
		unit: '万m³'
	}, {
		key: '年采煤',
		title: '年采煤量',
		value: '0',
		unit: '万吨'
	}, {
		key: '日剥离',
		title: '日剥离量',
		value: '0',
		unit: '万吨'
	}, {
		key: '月剥离',
		title: '月剥离量',
		value: '0',
		unit: '万吨'
	}, {
		key: '年剥离',
		title: '年剥离量',
		value: '0',
		unit: '万吨'
	}])

	function fn1() {
		getByApiCode({
			apiCode: "caichangcaiboliang",
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list.value.forEach(item => {
				item.value = data[item.key] || 0
			})
		})
	}

	/**************************************原煤产量*************************************************/
	const opts = {
			color: ["#1179E8", "#52D29D"],
			padding: [0, 10, 10, 0],
			enableScroll: true,
			dataLabel: false,
			legend: {
				position: 'top',
				margin: 10
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				labelCount: 5,
				itemCount: 10,
			},
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: '万吨',
					titleOffsetY: -10,
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				}
			}
		},
		chartData = ref({})

	function fn2() {
		getApiFabric({
			apiCode: "57d5b9c9-b6d8-4c59-acde-564e22a8bfbc",
			propertyMapping: {
				x: "month",
				y1: "actual",
				y2: "plan"
			}
		}).then(res => {
			const resData = res.data.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1)
				prev.series2.push(cur.y2)
				return prev;
			}, {
				categories: [],
				series1: [],
				series2: []
			})
			chartData.value = {
				categories: resData.categories,
				series: [{
					name: "实际产量",
					data: resData.series1
				}, {
					name: "计划产量",
					data: resData.series2,

				}]
			}
		})
	}
	/**************************************剥离土方量*************************************************/
	const opts2 = {
			...opts,
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: '万m³',
					titleOffsetY: -10,
				}]
			},

		},
		chartData2 = ref({})

	function fn3() {
		getApiFabric({
			apiCode: "d30298d8-301d-4ec6-b316-24417c7bd27a",
			propertyMapping: {
				x: "x",
				y1: "y1",
				y2: "y2"
			}
		}).then(res => {
			const resData = res.data.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1)
				prev.series2.push(cur.y2)
				return prev;
			}, {
				categories: [],
				series1: [],
				series2: []
			})
			chartData2.value = {
				categories: resData.categories,
				series: [{
					name: "实际",
					data: resData.series1
				}, {
					name: "计划",
					data: resData.series2,

				}]
			}
		})
	}

	/**************************************剥离土方量*************************************************/
	const opts3 = {
			...opts,
		},
		chartData3 = ref({})

	function fn4() {
		getApiFabric({
			apiCode: "b74be9af-7488-4979-8979-eea46382eff2",
			propertyMapping: {
				x: "x",
				y1: "y",
				y2: "z"
			}
		}).then(res => {
			const resData = res.data.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1)
				prev.series2.push(cur.y2)
				return prev;
			}, {
				categories: [],
				series1: [],
				series2: []
			})
			chartData3.value = {
				categories: resData.categories,
				series: [{
					name: "实际产量",
					data: resData.series1
				}, {
					name: "预测产量",
					data: resData.series2,

				}]
			}
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn2(), fn3(), fn4()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style scoped lang="scss">

</style>